<template>
  <a-card :bordered="false">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-form-item label="任务编码">
        <a-input v-model="queryParam.instanceCode" />
      </a-form-item>
      <a-form-item label="任务名称">
        <a-input v-model="queryParam.instanceName" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </a-form-item>
    </a-form>
    <!-- <a-tabs @change="callback">
      <a-tab-pane key="1" tab="全部"></a-tab-pane>
      <a-tab-pane key="2" tab="待我考核"></a-tab-pane>
      <a-tab-pane key="3" tab="已考核考核"></a-tab-pane>
    </a-tabs> -->

    <vxe-grid
      id="PerformancePlan"
      ref="vxeTable"
      v-bind="options"
      :columns="columns"
      :data="dataSource"
      @toolbar-button-click="toolbarButtonClickEvent"
    >
      <template v-slot:toolbar_buttons>
        <a-radio-group v-model="tabKey" @change="callback">
          <a-radio-button value="1">
            全部
          </a-radio-button>
          <a-radio-button value="2">
            待我考核
          </a-radio-button>
          <a-radio-button value="3">
            已考核考核
          </a-radio-button>
        </a-radio-group>
      </template>
      <template v-slot:operate="{ row }">
        <a v-if="row.taskStatus === '0'" @click="handleEdit(row)">打分</a>
        <a-divider v-if="row.taskStatus === '0'" type="vertical" />
        <a @click="handleDetail(row)">查看</a>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="layouts"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    <assessment-task-modal ref="modalForm"  @ok="modalFormOk"/>
  </a-card>
</template>
<script >
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import AssessmentTaskModal from './modal/AssessmentTaskModal'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import { mapGetters } from 'vuex'
export default {
  name: 'AssessmenTask',
  mixins: [VxeTableMixin],
  components: {
    JSelectUserByDep,
    AssessmentTaskModal
  },
  data() {
    return {
      columns: [
        // { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'instanceCode', title: '任务编码' },
        // { field: 'taskCode', title: '节点编码' },
        { field: 'leaderUser.realname', title: '考评人' },
        { field: 'weight', title: '节点权重' },
        { field: 'user.realname', title: '被考核人' },
        { field: 'taskStatus', title: '任务状态', slots: { default: ({ row }) => {
          return filterDictTextByCache('hr_task_status', row.taskStatus)
        } }},
        { field: 'operate', title: '操作', width: 150, slots: { default: 'operate' }}
      ],
      url: {
        list: '/hr/assessment/task/list'
      },
      disableMixinCreated: true,
      tabKey: '1'
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    callback(e) {
      const key = e.target.value
      switch (key) {
        case '1':
          this.queryParam.taskStatus = null
          this.loadData()
          break
        case '2':
          this.queryParam.taskStatus = '0'
          this.loadData()
          break
        case '3':
          this.queryParam.taskStatus = '1'
          this.loadData()
          break
      }
    }
  },
  created() {
    this.queryParam.leader = this.userInfo().username
    this.loadData()
  }
}
</script>
